<!DOCTYPE html>
<html>
<head>
    <title>Job Detail</title>
    <link rel="stylesheet" th:href="@{/css/sidebar.css}" />
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex; /* 使用 flex 布局 */
        }

        #content-container {
            flex: 1;
            margin-left: 20px;
        }

        #searchButton {
            padding: 5px 10px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        button {
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            margin-bottom: 10px;
        }

        .form-container {
            max-width: 500px;
            margin: 0 auto;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }

        .form-container label {
            display: block;
            margin-bottom: 5px;
        }

        .form-container select {
            width: 100%;
            padding: 5px;
            margin-bottom: 10px;
            border: 1px solid #ccc;
            border-radius: 3px;
        }

        .form-container input[type="text"] {
            width: 100%;
            padding: 5px;
            margin-bottom: 10px;
            border: 1px solid #ccc;
            border-radius: 3px;
        }

        .form-container input[type="checkbox"] {
            margin-top: 5px;
        }

        .form-container .button-container {
            text-align: right;
            margin-top: 10px;
        }
    </style>
    <script>
        var jobId = '';
        var isEditMode = false;

        function getJobIdFromURL() {
            var urlParams = new URLSearchParams(window.location.search);
            jobId = urlParams.get('id');
        }

        function queryJobInfo() {
            fetch('/job/' + jobId, {
                method: 'GET'
            })
                .then(function(response) {
                    if (response.ok) {
                        return response.json();
                    } else {
                        throw new Error('Request failed with status: ' + response.status);
                    }
                })
                .then(function(data) {
                    if (data.code === 200) {
                        var jobInfo = data.data;
                        document.getElementById('jobId').value = jobInfo.jobId
                        document.getElementById('jobName').value = jobInfo.jobName;
                        document.getElementById('description').value = jobInfo.description;
                        document.getElementById('executeClassPath').value = jobInfo.executeClassPath;
                        document.getElementById('cron').value = jobInfo.cron;
                        document.getElementById('executeStrategy').value = jobInfo.executeStrategy;
                        document.getElementById('createTime').value = jobInfo.createTime;
                        document.getElementById('updateTime').value = jobInfo.updateTime;

                        var openCheckbox = document.getElementById('open');
                        openCheckbox.checked = jobInfo.open === 1;
                    } else {
                        console.error(data.msg);
                    }
                })
                .catch(function(error) {
                    console.error(error);
                });
        }

        function updateJob() {
            var jobId = document.getElementById('jobId').value;
            var jobName = document.getElementById("jobName").value;
            var jobExecuteClassPath = document.getElementById("executeClassPath").value;
            var jobDescription = document.getElementById("description").value;
            var jobCron = document.getElementById("cron").value;

            // 获取执行策略下拉列表中的选中值
            var jobExecuteStrategySelect = document.getElementById("executeStrategy");
            var jobExecuteStrategy = jobExecuteStrategySelect.value;

            var openCheckbox = document.getElementById("open");
            var open = openCheckbox.checked ? 1 : 0;

            var data = {
                jobId: jobId,
                jobName: jobName,
                executeClassPath: jobExecuteClassPath,
                description: jobDescription,
                cron: jobCron,
                open: open,
                executeStrategy: jobExecuteStrategy // 将执行策略添加到数据中
            };

            console.log('data', data)

            fetch('/job', {
                method: 'PUT',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(data)
            })
                .then(response => response.json())
                .then(result => {
                    if (result.code === 200) {
                        location.reload();
                    } else {
                        alert(result.msg);
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                });
        }

        function getExecuteStrategy() {
            // 获取执行策略下拉列表
            var jobExecuteStrategySelect = document.getElementById("executeStrategy");

            // 发送GET请求获取执行策略选项
            fetch('/job/executeStrategy')
                .then(response => response.json())
                .then(result => {
                    if (result.code === 200) {
                        var options = result.data;
                        // 遍历选项，创建option元素并添加到下拉列表中
                        options.forEach(option => {
                            var optionElement = document.createElement("option");
                            optionElement.value = option.name;
                            optionElement.textContent = option.description;
                            jobExecuteStrategySelect.appendChild(optionElement);
                        });
                    } else {
                        console.log(result.msg);
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                });
        }

        function toggleEditMode() {
            isEditMode = !isEditMode;
            var formInputs = document.querySelectorAll('.form-container input[type="text"]');
            for (var i = 0; i < formInputs.length; i++) {
                formInputs[i].readOnly = !isEditMode;
            }

            var executeStrategySelect = document.getElementById('executeStrategy');
            executeStrategySelect.disabled = !isEditMode;

            var openCheckbox = document.getElementById('open');
            openCheckbox.disabled = !isEditMode;

            var updateButton = document.getElementById('updateButton')
            updateButton.disabled = !isEditMode;
        }

        function goBack() {
            window.location.href = "/index";
        }

        function init() {
            getExecuteStrategy()
            getJobIdFromURL();
            queryJobInfo();

            var editButton = document.getElementById('editButton');
            editButton.addEventListener('click', toggleEditMode);
        }

        document.addEventListener('DOMContentLoaded', init);
    </script>
</head>
<body>
<div th:replace="sidebar.html :: sidebar"></div>
<div id="content-container">

    <button type="button" onclick="goBack()">返回</button>
    <div class="button-container">
        <button id="editButton">编辑</button>
    </div>
    <div class="form-container">
        <h2>Job Detail</h2>
        <form>
            <input type="text" id="jobId" name="jobName" disabled>
            <label for="jobName">任务名：</label>
            <input type="text" id="jobName" name="jobName" readonly>
            <br>
            <label for="description">任务描述：</label>
            <input type="text" id="description" name="description" readonly>
            <br>
            <label for="executeClassPath">执行类路径：</label>
            <input type="text" id="executeClassPath" name="executeClassPath" readonly>
            <br>
            <label for="cron">cron：</label>
            <input type="text" id="cron" name="cron" readonly>
            <br>
            <label for="executeStrategy">执行策略：</label>
            <select id="executeStrategy" name="executeStrategy" disabled>
            </select>
            <br>
            <label for="createTime">创建时间：</label>
            <input type="text" id="createTime" name="createTime" readonly>
            <br>
            <label for="updateTime">更新时间：</label>
            <input type="text" id="updateTime" name="updateTime" readonly>
            <br>
            <label for="open">开关状态：</label>
            <input type="checkbox" id="open" name="open" disabled>
            <br>
            <button type="button" id="updateButton" onclick="updateJob()" disabled>更新</button>
        </form>
    </div>
</div>
</body>
</html>